/**
 * 矩形类，所有类的父类
 * 宽度、高度、x轴坐标、y轴坐标、水平方向速度、垂直方向速度、dom节点
 */
export class Rectangle {
  constructor(width,height,x,y,speedx,speedy,dom) {
    this.width = width
    this.height = height
    this.x = x
    this.y = y
    this.speedx = speedx
    this.speedy = speedy
    this.dom = dom
  }

  /**
   * dom节点单位时间移动后的位置
   * @param {number} duration 单位时间
   */
  move(duration) {
    let tx = this.speedx * duration
    let ty = this.speedy * duration
    this.x = this.x + tx
    this.y = this.y + ty
    // 重新渲染DOM节点
    if (this.onMove) {
      this.onMove()
    } 
    this.render()
  }

  /**
   * 更新dom节点
   */
  render() {
    this.dom.style.width = this.width + 'px'
    this.dom.style.height = this.height + 'px'
    this.dom.style.left = this.x + 'px'
    this.dom.style.top = this.y + 'px'
  }
}